﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
      <link href="css/base.css" rel="stylesheet" />
     <link href="css/common.css" rel="stylesheet" />
    
</head>
<body class="h">
     <div class="navbar">
      <a class="topfont fl">管理系统</a>  
        <ul class="fr">
            <li class="navbar-itemline"></li>
            <li class="navbar-item">消息1</li>
            <li class="navbar-itemline"></li>
             <li class="navbar-item">测试2</li>
        </ul>
    </div>
    <div class="h">
        <div class=" h" style="width:225px;position:absolute;"> 
            <div id="sidebar" class="sidebar">
        <ul>
            <li><a id="sidebar-1" class="sidebar-parentbc" href="#"><span><!--图标样式--></span> 标题 <!--<span class="arrow"><</span>--></a></li>
            <li><a id="sidebar-2" class="sidebar-parentbc" href="#"><span><!--图标样式--></span> 标题</a>
                <ul>
                    <li><a  id="sidebar-3" href="#">标题</a></li>
                    <li><a  id="sidebar-4" href="#">标题</a></li>
                    <li><a  id="sidebar-5" href="#">标题</a></li>
                    <li><a  id="sidebar-6" href="#">标题</a></li>
                </ul><!--子菜单-->
            </li>
            <li><a id="A1" class="sidebar-parentbc" href="#"><span><!--图标样式--></span> 标题</a>
                <ul>
                    <li><a  id="A2" href="#">标题</a></li>
                    <li><a  id="A3" href="#">标题</a></li>
                    <li><a  id="A4" href="#">标题</a></li>
                    <li><a  id="A5" href="#">标题</a></li>
                </ul><!--子菜单-->
            </li>
        </ul>
    </div>
        </div>
        <div style="margin-left:225px;">
            <div class="main-wrapper">
        <!--内容导航-->
        <ul class="main-breadcrumb">
            <li><a href="#">首页</a><span class="main-breadcrumb-tab">></span></li>
            <li><a href="#">一级</a><span class="main-breadcrumb-tab">></span></li>
        </ul>
        <!--内容表单-->
        <div class="main-content">
            <h3 class="main-content-title">这里是一个标题</h3>
            <div class="main-content-main">
                <form action="顶部.html">
                    <fieldset>
                        <legend>测试</legend>
                        <div class="main-content-form-item">
                            <label class="main-content-form-lable">姓名</label>
                            <div class="main-content-from-inputwrapper">
                                <input class="main-content-form-input" type="text" />
                                <span class="main-content-form-error ">提示信息</span>
                            </div>
                        </div>
                         <div class="main-content-form-item">
                            <label class="main-content-form-lable">姓名</label>
                            <div class="main-content-from-inputwrapper">
                                <input class="main-content-form-input" type="text" />
                                <span class="main-content-form-error ">提示信息</span>
                            </div>
                        </div>
                         <div  class="main-content-form-item">
                            <label class="main-content-form-lable">姓名</label>
                            <div class="main-content-from-inputwrapper">
                                <input class="main-content-form-input" type="text" />
                                <span class="main-content-form-error ">提示信息</span>
                            </div>
                        </div>
                        <div class="main-content-form-actions"><button class="btn" type="submit">确认</button><!-- <button class="btn">取消</button>--></div>
                    </fieldset>
                </form>
            </div>
        </div>
    </div>

        </div>
    </div>
    
    <script type="text/javascript" src="../Scripts/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
        $(function () {
            sidebar("3");
            //alert(window.location.pathname);
        })
        //要显示的a的id号，不需要加sidebar-
        function sidebar(tabhref) {
            tabhref = "sidebar-" + tabhref;
            //当前选中项
            var tab = $("#" + tabhref);
            //所有子ul
            var childuls = $("#sidebar li ul");
            //所有存在子ul的同级a标记
            var hrchilds = $("#sidebar>ul>li:has(ul)>a");

            childuls.hide();
            tab.attr("class", function () {
                if (tab.parents('li').length == 1) {
                    return "start";
                } else {
                    tab.parent().parent().show().prev().attr("class", "start");
                    return "sub";
                }
            });
            hrchilds.attr("href", "javascript:void(0)");
            //===============存在子标签，可点击展开
            $("<span class=\"arrow\"><</span>").appendTo(hrchilds);//添加箭头
            hrchilds.click(function () {
                $(this).next().slideToggle("fast");
            });
        }
    </script>
    
</body>
</html>
